<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <!--禁止微信的缓存页面-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
  <title>长安整车物流</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
  <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
  <script src="js/base.js"></script>
  <script src="js/api.js"></script>
  <script src="js/wx.js"></script>
</head>

<body class="my">

  <div class="weui-panel" id="list">
    <!-- <div class="weui-cells__title">交接单列表</div> -->
    <div class="weui-panel__hd">交接单列表</div>
  </div>

  <div class="weui-panel">
    <form id="form" action="">
      <div class="weui-cells__title">板车号：<span id="transToolCode"></span> 司机：<span id="driverName"></span></div>
      <div class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label for="typeStr" class="weui-label">异常类型</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input" readonly  id="typeStr" onclick="changeType()" type="text" value="" placeholder="请选择类型" />
            <input class="weui-input" readonly id="abnormityType" type="hidden" value="" />
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label for="vehicleAbnormityQuantity" class="weui-label">商品车质损数量</label>
          </div>
          <div class="weui-cell__bd">
            <input id="vehicleAbnormityQuantity" class="weui-input" type="number" value="" placeholder="请输入数量" />
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label for="expectedDaysNumber" class="weui-label">预计影响天数</label>
          </div>
          <div class="weui-cell__bd">
            <input id="expectedDaysNumber" class="weui-input" type="number" value="" placeholder="请输入天数" />
          </div>
        </div>

        <div class="weui-cell weui-cell_switch">
          <div class="weui-cell__bd">更换板车</div>
          <div class="weui-cell__ft">
            <label for="whetherChangeCar" class="weui-switch-cp">
              <input id="whetherChangeCar" class="weui-switch-cp__input" type="checkbox">
              <div class="weui-switch-cp__box"></div>
            </label>
          </div>
        </div>

        <div class="weui-cell weui-cell_switch">
          <div class="weui-cell__bd">更换驾驶员</div>
          <div class="weui-cell__ft">
            <label for="whetherChangeDriver" class="weui-switch-cp">
              <input id="whetherChangeDriver" class="weui-switch-cp__input" type="checkbox">
              <div class="weui-switch-cp__box"></div>
            </label>
          </div>
        </div>

        <div class="weui-cells__title">备注</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="remark" placeholder="请输入文本" rows="3"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>

        <div class="weui-gallery" id="gallery">
          <span class="weui-gallery__img" id="galleryImg"></span>
          <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
              <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploadfiles"></ul>
                <div class="weui-uploader__input-box">
                  <input id="uploaderInput" class="weui-uploader__input" type="button"/>
                </div>
              </div>
            </div>
          </div>
        </div>


      </div><!--weui-cells over-->

      <div class="weui-btn-area weui-flex">
        <span class="weui-flex__item">
          <a class="weui-btn weui-btn_primary" onclick="submit()" href="javascript:">提交</a>
        </span>
        <span style="margin-left: 16px">
          <a class="weui-btn weui-btn_default" onclick="reset()" href="javascript:;">重置</a>
        </span>
      </div>
    </form>
  </div>

  <script>
      var vConsole = new VConsole();
    var types = [], selectedType
    getList(function(data) {
      appendHtml(data.detail)
    })
    getTypes({},function(data){
      var arr = data.detail
      for (var i = 0; i < arr.length; i++) {
        (function(i) {
          var item = arr[i];
          types.push({
            label: item.description,
            onClick: function () {
              selectedType = item
              $('.list-items').hide()
              $('.toggle-expand').parent().removeClass('open')
              if (item.lookupCode == 'CAR_ABNORMITY') {
                $('.toggle-expand').show()
              } else {
                $('.toggle-expand').hide()
              }
              $("#typeStr").val(item.description)
              $("#abnormityType").val(item.lookupTypeId)
            }
          })
        }(i))
      }
    })

    function changeType() {
      weui.actionSheet(types)
    }
    function submit() {
      weui.form.checkIfBlur('#form');
      weui.form.validate('#form', function (error) {
        if (!error) {
          var sendcarApplyHeaders = getCheckedList()
          var params = {
            abnormityType: $('#abnormityType').val(),
            transToolId: $('#transToolId').val(),
            expectedDaysNumber: $('#expectedDaysNumber').val(),
            vehicleAbnormityQuantity: $('#vehicleAbnormityQuantity').val(),
            applyUser: window.localStorage.getItem('driverId'),
            sendcarApplyHeaders: sendcarApplyHeaders,
            whetherChangeDriver: $('#whetherChangeDriver').prop('checked') ? 1 : 0,
            whetherChangeCar: $('#whetherChangeCar').prop('checked')? 1 : 0,
            remark: $('#remark').val(),
            pictureList: images
          }
          console.log(params)
          saveAbnormal(params, function (data) {
            weui.alert('提交成功')
          })
        }
      });
    }
    function reset() {
      $('#vehicleAbnormityQuantity').val('')
      $('#expectedDaysNumber').val('')
      $('#remark').val('')
      $('#whetherChangeDriver').prop('checked', null)
      $('#whetherChangeCar').prop('checked', null)
      $('input[type="checkbox"]').prop('checked', null);
      $("#uploadfiles").find('li').remove();
        images = [];
    }
    function getIds(id){
      var ids = []
      $('[id^=' + id +']:checked').each(function(index, item){
        ids.push($(item).data('id'))
      })
      return ids
    }

    var images = [], index
    initSDK(function(){});
    wx.ready(function(){
        wx.checkJsApi({
            jsApiList: ['getLocalImgData','chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
                console.log(res.checkResult)
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });
    })

    function chooseImg () {
        console.log("chooseImg");
        wx.chooseImage({
            count: 9 - images.length, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album','camera'],
            success: function (res) {
                toBase64(res.localIds)
            },
            fail:function(e){
                console.log("fail");
            },
            complete:function(){
                console.log("complete");
            }
        });
    };
    //chooseImage成功就显示图片
    function showImage(base64){
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
        $("#uploadfiles").append($(tmpl.replace('#url#',base64 )));
    }
    $("#uploadfiles").on("click", "li", function() {
        index = $(this).index();
        $("#galleryImg").attr("style", this.getAttribute("style"));
        $("#gallery").show();
    });
    $("#gallery").on("click", function() {
        $("#gallery").hide();
    });
    //删除图片
    $(".weui-gallery__del").click(function() {
        $("#uploadfiles").find("li").eq(index).remove();
        images.splice(index,1);//删除该图片参数
    });
    function toBase64(localIds){
        for(var i=0;i<localIds.length;i++){
            wx.getLocalImgData({
                localId: localIds[i],
                success: function (res) {
                    var localData = res.localData;
                    if (localData.indexOf('data:image') != 0) {
                        localData = 'data:image/jpeg;base64,' +  localData
                    }
                    localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                    images.push(localData)
                    showImage(localData)
                }
            });
        }
    }
    $("#uploaderInput").on("click",chooseImg);
  </script>
</body>

</html>